<template>
  <div class="student">
    <h3>学生信息</h3>
    <button @click="tw">举手提问</button>
    <p>学生姓名：{{ student.name }}</p>
    <p>学生年龄：{{ student.age }}</p>
    <p>学生性别：{{ student.sex }}</p>
    <h4>接受到的信息：</h4>
    <div v-for="(msg, index) in messages" :key="index">
      <p>{{ msg }}</p>
    </div>
    <p>读取env的配置文件:{{ envname }}---{{ url }}</p>
  </div>
</template>

<script>
export default {
  name: 'student',
  components: {},
  props: {
    student: Object
  },
  data() {
    return {
      messages: [],
      envname:'',
      url:''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.envname = process.env.VUE_APP_NAME;
    this.url = process.env.VUE_APP_DEV_API_URL;
  },
  mounted() {
    // 移除了无效的事件监听器
  },
  methods: {
    tw() {
    // 给父组件发送事件 tquestion:事件名   this.student.name + '举手提问'
      this.$emit('tquestion', this.student.name + '举手提问');
    },
    receiveMessage(message) {
      this.messages.push(message);
    }
  },
}
</script>

<style lang="less" scoped>
    @width:300px;
    .student {
        background-color: aqua;
        width: @width;
        height: 300px;
        margin: 5px 10px;
        /* 超过展示y轴滚动 */
        overflow-y: scroll;
        h3{
            text-align: center;
        }
    }
</style>